<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
    <title>旅游首页</title>
    <link rel="stylesheet" href="../../css/amazeui.min.css">
    <link rel="stylesheet" href="css/app.css">
    <link rel="stylesheet" type="text/css" href="css/styleyd.css">
    <script type="text/javascript" src="js/jQuery-1.7.1.js"></script>
	<script type="text/javascript" src="js/jquery.datePicker-min.js"></script>
	<script type="text/javascript" src="../../script/api.js"></script>
	<script type="text/javascript" src="../../script/common.js"></script>
	<!--<link type="text/css" href="css/datepicker.css" rel="stylesheet" />-->
	<link rel="stylesheet" href="css/jquery-ui.css">
	<script src="js/jquery-ui.js"></script>
	<!--<script language="javascript" type="text/javascript" src="js/datepicker/WdatePicker.js"></script>-->
    
    <style type="text/css">
    .ui-widget-content{width:98%;margin:0 auto;}
    .borderradius{border-radius: 5px}
    input{
    	margin: 0;
    	padding:0;
    	border: 0;
    	width:100%;
    }
    .ct1{float: left;}
    .ct2{float: left;}
    .ct3{float: left;color: red;}
    .clear{clear:both; margin-bottom:13px;}
    .bt{padding:10px;}
    .bt1{display:block; height:50px; line-height:50px; text-align:center; width:50%;background: #ffaa43;}
</style>
</head>
<body>


<div id='header' class="am-g am-topbar-fixed-top" style="padding:0 0;background:#ffaa43;height:auto;">
	<div  onclick="api.closeWin();"  class="am-u-sm-2" style="margin-top:12px;padding-left: 17px">
		<img  src="images/arr-l.png" style="height:14px;height: 18px;"/>
	</div> 
	<div class="am-u-sm-8 til" style="margin-top:13px;text-align:center;">
		<h1>预定签证</h1>
	</div>
	<div class="am-u-sm-2" style="font-size: 20px;margin-top:10px;color:white;text-align:center;">

   </div>
   
</div>

<div class="am-g">
	<div class="am-u-sm-12" style="margin-top: 50px;">
	</div>
</div>

<div id="datepicker"></div>
<input type="hidden" id="inputDate" name="dat">

    <div class="ct">
        <div class="ct1 bt">签证人数：</div>
        <div class="ct2 bt">
            <div class="lui-num">
	            <div class="aui-counter-minus" id="reduce" onclick="goods_cut()"></div>
	                  <input id="number" class="aui-counter-input" type="number" value="1" readonly="true">
	            <div class="aui-counter-plus" id="add" onclick="goods_add()"></div>
        	</div>
        </div>
        <div class="ct3 bt" id="price"></div>
	</div>
	  
<div class="am-u-sm-12"  style="margin-top:15px;width:100%;border-radius: 5px">
      <input type="text" class="am-form-field borderradius"  id="linkman" name="linkman" placeholder="联系人" />
</div>

   <div class="am-u-sm-12"  style="margin-top:15px;width:100%;border-radius: 5px;">
      <input type="text" class="am-form-field borderradius"  id="mobile" name="mobile" placeholder="手机" />
  </div>

  <div class="am-u-sm-12"  style="margin-top:15px;width:100%;border-radius: 5px;">
      <input type="text" class="am-form-field borderradius"  id="email" name="email" placeholder="邮箱" />
  </div>

  <div class="am-u-sm-12"  style="margin-top:15px;width:100%;border-radius: 5px;">
      <input type="text" class="am-form-field borderradius"  id="address" name="address" placeholder="联系地址" />
  </div>
  
  
  <div class="am-u-sm-12" style="margin-top: 10px;border: 1px solid #ccc;">
   <div class="am-u-sm-12" style="padding:0px;height: 50px;overflow: hidden">
	    <div class="am-u-sm-2" style="padding: 4px">
	       <img src="../../image/logo_alipay.png" style="height: 40px">
	    </div>
	    
	    <div class="am-u-sm-8" style="padding: 0px">
	       <div style="line-height: 23px"><label>支付宝</label> </div>
	       <div style="font-size: 12px;">推荐已安装支付宝客户端的用户使用 </div>
	    </div>
	    
	     <div class="am-u-sm-2" style="padding: 7px 20px;text-align: right">
	        <input class="lui-radio" type="radio" value="支付宝" name="payType" checked="">
	    </div>
	    
	</div>
	
	<div class="am-u-sm-12" style="padding:0px;height: 50px;overflow: hidden;">
	    <div class="am-u-sm-2" style="padding: 4px">
	       <img src="../../image/logo_wechatpay.png" style="height: 40px">
	    </div>
	    
	    <div class="am-u-sm-8" style="padding: 0px">
	       <div style="line-height: 23px"><label>微信支付</label> </div>
	       <div style="font-size: 12px;">推荐已安装微信客户端的用户使用 </div>
	    </div>
	    
	     <div class="am-u-sm-2" style="padding: 7px 20px;text-align: right">
	        <input class="lui-radio" type="radio" value="微信支付" name="payType">
	    </div>
	    
	</div>
		
</div>
<div class="am-g">
	<div class="am-u-sm-12" style="margin-bottom: 80px;">
	</div>
</div>


<div data-am-widget="navbar" class="am-navbar am-cf am-navbar-default am-no-layout">
	<ul class="am-navbar-nav am-cf am-avg-sm-4" style="background:#ffaa43;color:white;"> 
		<li onclick="call();">
			<i class="am-icon-phone">
			</i>电话咨询
		</li>
  			|
		 <input type="button" class="bt1"  value="立即预定" onclick="addOrder();"/>
	</ul>
</div>

<script type="text/javascript">

	var product;
	var totalPrice = 0;
	var payType;
	
	apiready = function(){
		product = api.pageParam.product;
		totalPrice = (+product.price).toFixed(2);
		$api.html($api.byId('price'), '¥' + totalPrice + '/元');
		
	   	$("#datepicker").datepicker({
	    		//numberOfMonths:1,//显示几个月
	            dateFormat: 'yy-mm-dd',//日期格式  
	            clearText:"清除",//清除日期的按钮名称  
	            closeText:"关闭",//关闭选择框的按钮名称  
	            yearSuffix: '年', //年的后缀  
	            showMonthAfterYear:true,//是否把月放在年的后面  
	            minDate: 3,
            	maxDate: "+20y +3D",
	            monthNames: ['一月','二月','三月','四月','五月','六月','七月','八月','九月','十月','十一月','十二月'],  
	            dayNames: ['星期日','星期一','星期二','星期三','星期四','星期五','星期六'],  
	            dayNamesShort: ['周日','周一','周二','周三','周四','周五','周六'],  
	            dayNamesMin: ['日','一','二','三','四','五','六'],  
	            onSelect: function(selectedDate) {//选择日期后执行的操作
					$("#inputDate").val(selectedDate); 
	                //alert(selectedDate);
	            }});
		
			var alt = $( "#datepicker" ).datepicker('getDate');
			var d = new Date(alt);
			var str = d.toLocaleDateString().replace(/(\d+)[^\d](\d+)[^\d](\d+)[^\d]?/, "$1-$2-$3");
			$("#inputDate").val(str);
//			console.log(str);
	};
	
	function call(){
		if(product.tel){
			api.call({type: 'tel_prompt', number: product.tel});
		}
	}

	//减法
	function goods_cut(){
		var num_val = document.getElementById('number');
		var new_num = num_val.value;
		if(isNaN(new_num))
		{
			alert('请输入数字');
	  		return false
		}
		var Num = parseInt(new_num);
		if(Num > 1)
		Num = Num - 1;
		num_val.value = Num;
		totalPrice = (+product.price*Num).toFixed(2);
		
		$api.html($api.byId('price'), '¥' + totalPrice + '/元');
	}
	
	//加法
	function goods_add(){
		var num_val = document.getElementById('number');
		var new_num = num_val.value;
		if(isNaN(new_num))
		{
			alert('请输入数字');
			return false
		}
		var Num = parseInt(new_num);
		Num = Num + 1;
		num_val.value = Num;
		totalPrice = (+product.price*Num).toFixed(2);
		
		$api.html($api.byId('price'), '¥' + totalPrice + '/元');
	}
	
	
	/* *
	 * 处理注册用户
	 */
	function addOrder()
	{
		var date = $api.byId('inputDate').value;
		var number = $api.byId('number').value;
	  	var linkman = $api.byId('linkman').value;
	  	var mobile = $api.byId('mobile').value;
	  	var email = $api.byId('email').value;
	  	var address = $api.byId('address').value;
	  	
	  	payType = $api.val($api.dom('input[name="payType"]:checked'));
	
	  	var msg = '';
	  
		if (date.length == 0)
		{
	  	msg += "日期不能为空" + '\n';
		}
		
		if (linkman.length == 0)
		{
	  	msg += "联系人不能为空" + '\n';
		}
		
		if (mobile.length == 0)
		{
	  	msg += "手机不能为空" + '\n';
		}
		
		if (email.length == 0)
		 {
		   msg += "邮箱不能为空" + '\n';
		 }

		 if (address.length == 0)
		 {
		   msg += "联系地址不能为空" + '\n';
		 }
		 
		 if (email.length>0)
		  {
		    var reg =  /^([a-zA-Z0-9_\.\-])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})+$/;
		    if (!reg.test(email))
		    {
		      msg += "邮箱的格式不对" + '\n';
		    }
		  }

		  if (mobile.length>0)
		  {
		    var reg = /^(0|86|17951)?(13[0-9]|15[012356789]|17[678]|18[0-9]|14[57])[0-9]{8}$/;
		    if (!reg.test(mobile))
		    {
		      msg += "手机的格式不对" + '\n';
		    }
		  }
	
		if (msg.length > 0)
		{
	  		alert(msg);
	  		return;
		}
	  	
	  	var data = {
	  		'account':$api.getStorage('account'),
	  		'visaDate':date,
	  		'num':number,
	  		'linkman':linkman,
	  		'mobile':mobile,
	  		'email':email,
	  		'address':address,
	  		'proTotal':totalPrice,
    		'total':totalPrice,
    		'rTotal':totalPrice,
    		'payType':payType,
    		'country':product.country,
    		'productname':product.name,
    		'productid':product._id
	  	}
	  	
	  	do_ajax('/app/visa/addorder', 'post', data, function(result, err){
	        api.hideProgress();

			alert(result.datas);
			
			if(result.resultCode == '0'){
				var orderinfo= {
					orderNo: result.orderNo,
					total: totalPrice,
					payType: payType,
				};
			
				api.openWin({
			        name: 'pay',
			        url: "../pay.html",
			        pageParam: {orderinfo:orderinfo},
				});
			}
		});
	}
	
</script>

</body>

</html>